import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import {Badge, Button, Col, Icon, Modal, Row, Table} from 'antd'
import classnames from 'classnames'
import {randomColor} from 'config'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'


const {confirm} = Modal

const List = ({
                onDeleteItem, onLeaveItem, onEditItem, isMotion, location, ...tableProps
              }) => {

  const getAvatarText = (realName) => {
    return realName ? realName.substr(realName.length - 1, realName.length) : ""
  }


  const statusMap = ['success', 'error', 'error']
  const status = ['', '', '待审核', '审核不通过', '审核通过待发货', '已发货', '已签收', '退回中', '退回签收', '已取消']


  const columns = [
    {
      title: '订单编号',
      dataIndex: 'sn',
      key: 'sn',
    }, {
      title: '下单员工',
      dataIndex: 'emp',
      key: 'emp_username',
      render: emp => emp ? emp.username : "-",
    }, {
      title: '下单员工所属部门',
      dataIndex: 'belongDeptName',
      key: 'belongDeptName',
    }, {
      title: '订单总金额',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      render: (val) => val + '元',
    }, {
      title: '业绩员工1',
      dataIndex: 'awardEmp1',
      key: 'awardEmp1',
    }, {
      title: '业绩金额1',
      dataIndex: 'awardEmp1Money',
      key: 'awardEmp1Money',
    }, {
      title: '业绩员工2',
      dataIndex: 'awardEmp2',
      key: 'awardEmp2',

    }, {
      title: '业绩金额2',
      dataIndex: 'awardEmp2Money',
      key: 'awardEmp2Money',
    },
    {
      title: '业绩员工3',
      dataIndex: 'awardEmp3',
      key: 'awardEmp3',
    },
    {
      title: '业绩金额3',
      dataIndex: 'awardEmp3Money',
      key: 'awardEmp3Money',
    },
    {
      title: '获客渠道',
      dataIndex: 'customerSourceName',
      key: 'customerSourceName',
    },
    {
      title: '物流信息',
      dataIndex: 'detail',
      key: 'detail',
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      key: 'status',
      render: (val) => <Badge status={statusMap[val]} text={status[val]}/>,
    },
    {
      title: '下单日期',
      dataIndex: 'ctime',
      key: 'ctime',

    },
    {
      title: '要求发货日期',
      dataIndex: 'requireSendTime',
      key: 'requireSendTime',
    },
    {
      title: '发货日期',
      dataIndex: 'sendTime',
      key: 'sendTime',
    },
    {
      title: '签收日期',
      dataIndex: 'signTime',
      key: 'signTime',
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Fragment>
      {/*<Row gutter={24}>*/}
        {/*<Col xl={{span: 24}} md={{span: 24}} sm={{span: 24}}>*/}
          {/*<div style={{*/}
            {/*display: 'flex',*/}
            {/*justifyContent: 'space-between',*/}
            {/*flexWrap: 'wrap',*/}
            {/*float: 'right',*/}
            {/*marginBottom: 12,*/}
          {/*}}>*/}
            {/*<div>*/}
              {/*<Button className="margin-right" type="primary">导出查询全部</Button>*/}
              {/*<a href="javascript:alert('下载模板');" target="_blank">*/}
                {/*<Button className="margin-right"><Icon type="cloud-download-o"/>导出今日全部</Button>*/}
              {/*</a>*/}
              {/*<a href="javascript:alert('运营号导出');" target="_blank">*/}
                {/*<Button className="margin-right"><Icon type="cloud-download-o"/>导出</Button>*/}
              {/*</a>*/}
            {/*</div>*/}
          {/*</div>*/}
        {/*</Col>*/}
      {/*</Row>*/}
      <Table
        {...tableProps}
        className={classnames(styles.table, {[styles.motion]: isMotion})}
        scroll={{x: 2000}}
        columns={columns}
        simple
        rowKey={record => record.id}
        components={{
          body: {wrapper: isMotion ? AnimateBody : CommonBody},
        }}
      />
    </Fragment>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
